<!--  -->
<template>
<div class='recommend'>
  <announcement />
  <div class="recommend-list">
    <div class="recommend-nav">
      <ul>
        <li>精品</li>
        <li>精品</li>
        <li>精品</li>
        <li>精品</li>
        <li>精品</li>
        <li>精品</li>
        <li>精品</li>
        <li>精品</li>
        <li>精品</li>
        <li>精品</li>
        <li>精品</li>
        <li>精品</li>
        <li>...</li>
      </ul>
    </div>
    <syxelement />
  </div>
</div>
</template>

<script lang='ts'>

import { defineComponent } from 'vue'
import announcement from '@/views/recommend/announcement/index.vue'
import syxelement from '@/views/recommend/syxelement/index.vue'

export default defineComponent({
  name: '',
  props: {
    msg: String
  },
  components: {
    announcement,
    syxelement
  },
  setup () {
    return {
    }
  }
})
</script>

<style scoped lang='scss'>
.recommend{
  display: flex;
}
.recommend-list{
  width: 100%;
  min-width: 900px;
}
.recommend-nav{
  padding: 0px 15px;
  box-shadow: 0px 1px 18px rgba(90, 90, 90,.2);
  border-radius: 5%;
  border: 1px solid rgba(90, 90, 90,.1);
  ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    li{
      padding: 10px 15px;
    }
  }
}
</style>
